<template>
  <div class="brand10">
    <div class="brand10-con">
      <div class="brand10-box">
        <div class="zgxw">
          <div class="point point1" />
          <div class="line" />
          <div class="tit1">中国鞋网</div>
          <div class="line" />
          <div class="point point2" />
        </div>
        <h2>中国十大品牌&nbsp;&nbsp;全民网络票选</h2>
        <p class="enLine">CHINA’S&nbsp;&nbsp;TOP&nbsp;&nbsp;TEN&nbsp;&nbsp;BRANDS.&nbsp;&nbsp;NATIONAL&nbsp;&nbsp;INTERNET&nbsp;&nbsp;VOTE</p>
        <p class="yinling">引领行业精神 &nbsp;&nbsp;注重品牌文化 &nbsp;&nbsp;全民网络投票</p>
        <div class="hdjs">活动介绍</div>
        <p class="enHdjs">ACTIVITY</p>
        <p class="hdjs-text hdjs-p1">中国橱柜十大品牌、中国橱柜十佳品牌是中华橱柜网重磅推出的整体橱柜十大品牌、整体橱柜十佳品牌排名网络评选活动。活动采用网络投票、专业考评和消费者问卷调研三项综合评定，公平公正地评选出的中国橱柜十佳品牌、中国橱柜十大品牌排名榜。</p>
        <p class="hdjs-text hdjs-p2"> “橱柜十大品牌”和“橱柜十佳品牌”旨在引起社会的广泛关注，领跑行业发展方向，并推动更多橱柜品牌快速发展，为众多整体橱柜企业提供充分展示自身实力的平台。</p>
        <div class="sdppphb">十大品牌排行榜</div>
        <p class="enSdppphb">BRAND LIST</p>
        <div class="ruxuan">
          <button @click="joinTo">如何入选？</button>
        </div>
        <ul class="rank-box">
          <router-link v-for="(item,index) in dataList" :key="index" :class="item.logoBg?'item-theme'+item.logoBg:''" to="/vMain/allBrand/brand2C" tag="li">
            <div>
              <img :src="item.logo">
            </div>
            <div class="item-con">
              <div class="item-name">
                <div class="item-name-box">
                  <span>{{ item.title }}</span>

                  <img v-if="item.renzheng" src="../../../assets/img/brand/yrz.png">
                  <img v-else src="../../../assets/img/brand/wrz.png">

                </div>
                <p>{{ item.describe }}</p>
              </div>
              <div class="item-more">查看详情</div>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
    <pop-call />
  </div>
</template>

<script>
import popCall from './components/popCall'
export default {
  components: { popCall },
  data() {
    return {
      ggBool: true,
      conObj: {
        text: '千库企业VIP&nbsp;&nbsp;&nbsp;十大板块正版素材&nbsp;&nbsp;&nbsp;线上线下商用更安全',
        url: require('../../../assets/img/advertisement/bg-gg.png')
      },
      // list部分
      dataList: [
        {
          logoBg: '1',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '迪士尼',
          renzheng: true,
          describe: '每个故事都蕴含着一段标致的旅程',
          content: ''
        },
        {
          logoBg: '2',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '亚马逊',
          renzheng: false,
          describe: '每个故事都蕴含着一段标致的旅程',
          content: ''
        },
        {
          logoBg: '3',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '淘宝',
          renzheng: true,
          describe: '每个故事都蕴含着一段标致的旅程',
          content: ''
        },
        {
          logoBg: '4',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '京东',
          renzheng: true,
          describe: '每个故事都蕴含着一段标致的旅程',
          content: ''
        },
        {
          logoBg: '5',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '美图大战',
          renzheng: true,
          describe: '每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程',
          content: ''
        },
        {
          logoBg: '6',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '拼多多',
          renzheng: true,
          describe: '每个故事都蕴含着一段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程',
          content: ''
        },
        {
          logoBg: '7',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '拼多多',
          renzheng: true,
          describe: '每个故事都蕴含着一段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程',
          content: ''
        },
        {
          logoBg: '8',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '拼多多',
          renzheng: true,
          describe: '每个故事都蕴含着一段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程',
          content: ''
        },
        {
          logoBg: '9',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '拼多多',
          renzheng: true,
          describe: '每个故事都蕴含着一段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程',
          content: ''
        },
        {
          logoBg: '10',
          logo: require('../../../assets/img/brand/logo.png'),
          title: '拼多多',
          renzheng: true,
          describe: '每个故事都蕴含着一段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程每个故事都蕴含着一段标致的旅程',
          content: ''
        }
      ],
      msg: {
        boxStyle: {
          width: '568px',
          height: '354px',
          paddingTop: '73px'
        },
        closeCommits: 'changePop1',
        title: {},
        close: true,
        img: {
          url: require('../../../assets/img/pop/pop-call.png'),
          style: {
            height: '70px',
            margin: '0 auto',
            marginBottom: '42px'
          }
        },
        tagP: [
          {
            text: '联系我们400-966-85632',
            style: {
              lineHeight: '1',
              color: '#333',
              fontSize: '24px',
              marginBottom: '42px'
            },
            childs: {}
          }
        ],
        buttons: {
          oneButton: true,
          text: '好的',
          style: {
            width: '192px',
            height: '42px',
            backgroundColor: '#417AEF',
            fontSize: '18px',
            color: '#fff'
          }
        }
      }
    }
  },
  methods: {
    joinTo() {
      this.$store.commit('template1/changeBrand10Pop1', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.brand10-con{
  -height: 4443px;
  width: 100%;
  min-width: 1200px;
  background: url('../../../assets/img/brand/bg.jpg') no-repeat scroll center top;
  background-size: cover;
  >.brand10-box{
    width: 1200px;
    margin: 0 auto;
    padding-top: 171px;
    >p{
      width: 100%;
      text-align: center;
      color: #ECCE88;
    }
    >.zgxw{
      width: 485px;
      margin: 0 auto;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      margin-bottom: 32px;
      .point{
        width: 16px;
        height: 16px;
        border: 1px solid #ECCE88;
        transform: rotate(45deg)
      }
      >.point1{
        margin-right: 2px;
      }
      >.point2{
        margin-left: 2px;
      }
      .line{
        width: 91px;
        height: 1px;
        background-color: #ECCE88;
      }
      .tit1{
        width: 257px;
        height: 54px;
        line-height: 54px;
        border-radius: 24px;
        border: 1px solid #ECCE88;
        color: #ECCE88;
        text-align: center;
        font-size: 26px;
      }
    }
    >h2{
      width: 100%;
      height: 86px;
      line-height: 86px;
      margin-bottom: 14px;
      text-align: center;
      color: #ECCE88;
      font-size: 60px;
    }
    >.enLine{
      font-size: 18px;
      margin-bottom: 33px;
      letter-spacing:3px;
      font-weight: 100;
    }
    >.yinling{
      height: 54px;
      font-size: 24px;
      margin-bottom: 81px;
      letter-spacing:4px;
    }

    >.hdjs{
      width: 344px;
      height: 83px;
      line-height: 80px;
      text-align: center;
      font-size: 46px;
      color: #ECCE88;
      margin: 0 auto;
      background: url('../../../assets/img/brand/hdjs.png') no-repeat scroll center center;
      margin-bottom: 15px;
    }
    >.enHdjs{
      width: 100%;
      text-align: center;
      font-size: 34px;
      color: #ECCE88;
      font-weight: 100;
      margin-bottom: 41px;
    }
    .hdjs-text{
      font-size: 18px;
      color: #ECCE88;
      width: 968px;
      line-height: 2;
      margin: 0 auto;
    }
    .hdjs-p1{
      margin-bottom: 55px;  //原型图测不出两行的高度，这是问题，反馈给设计。
    }
    .hdjs-p2{
      margin-bottom: 79px;
    }
    >.sdppphb{
      width: 439px;
      height: 83px;
      line-height: 80px;
      font-size: 46px;
      color: #ECCE88;
      text-align: center;
      margin: 0 auto;
      background: url('../../../assets/img/brand/sdppphb.png') no-repeat scroll center center;
      margin-bottom: 15px;
    }
    >.enSdppphb{
      font-size: 34px;
      color: #ECCE88;
      width: 100%;
      text-align: center;
      font-weight: 100;
      letter-spacing:3px;/* 字间距 */
      margin-bottom: 38px;
    }
    >.ruxuan{
      width: 998px;
      height: 37px;
      margin: 0 auto;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 92px;
      >button{
        width: 191px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 18px;
        color: #080703;
        border-radius: 19px;
        background-color: #ECCE88;
        cursor: pointer;
      }
    }
    >.rank-box{
      width: 100%;
      padding-bottom: 71px;
      border-top: 1px dashed #817F7B;
      >li{
        width: 100%;
        height: 275px;
        padding: 0 40px 0 41px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #817F7B;
        cursor: pointer;
        >div:first-child{
          width: 335px;
          height: 240px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
          padding-top: 16px;
          padding-left: 29px;
          >img{
            display: block;
            max-width: 188px;
            max-height: 106px;
          }
        }
        >.item-con{
          width: 701px;
          height: 115px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
          >.item-name{
            width: 590px;
            //设置高度，超出后显示...
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;//规定几行显示省略号
            -webkit-box-orient: vertical;
            .item-name-box{
              min-width: 231px;
              height: 58px;
              display: flex;
              flex-flow: row nowrap;
              justify-content: flex-start;
              align-items: center;
              margin-bottom: 30px;
              >span{
                font-size: 44px;
                color: #ACA9A3;
                margin-right: 19px;
              }
              >img{
                display: block;
                width: 78px;
                height: 20px;
              }

            }
            >p{
              font-size: 20px;
              color: #817F7B;
            }
          }
          >.item-more{
            width: 130px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            color: #ACA9A3;
            border: 1px solid #ACA9A3;
            border-radius: 4px;
          }
        }
      }

      >li:hover{
        background-color: #1D1400;
        >.item-con{
          >.item-more{
            background-color: #ACA9A3;
            color: #080703;
          }
        }
      }
      >.item-theme1{
        >div:first-child{
          background: url('../../../assets/img/brand/brand1.png') no-repeat scroll center center;
          padding-top: 49px;
        }
        >.item-con{
          >.item-name{
            >.item-name-box{
              >span{
                color: #EBC04E;
              }
              >div{
                color: #C7A240;
                background-color: rgba(199,162,64,.23);
                border: 1px solid #C7A240;
              }
            }
            >p{
              font-size: 20px;
              color: #847F72;
            }
          }
        }
      }
      /* 未完成--跟UI确定li的hover状态是否改变了字体的颜色 */
      >.item-theme2{
        >div:first-child{
          background: url('../../../assets/img/brand/brand2.png') no-repeat scroll center center;
          padding-top: 49px;
        }
        >.item-con{
          >.item-name{
            >.item-name-box{
              >span{
                color: #D7D1BF;
              }
              >div{
                color: #D7D1BF;
                background-color: rgba(188,183,169,.23);
                border: 1px solid #BCB7A9;
              }
            }
            >p{
              font-size: 20px;
              color: #847F72;
            }
          }
        }
      }
      >.item-theme3{
        >div:first-child{
          background: url('../../../assets/img/brand/brand3.png') no-repeat scroll center center;
          padding-top: 49px;
        }
        >.item-con{
          >.item-name{
            >.item-name-box{
              >span{
                color: #AE7234;
              }
              >div{
                color: #C7A240;
                background-color: rgba(199,162,64,.23);
                border: 1px solid #C7A240;
              }
            }
            >p{
              font-size: 20px;
              color: #8B541D;
            }
          }
        }
      }
      >.item-theme4{
        >div:first-child{
          background: url('../../../assets/img/brand/brand4.png') no-repeat scroll 7px center;
        }
      }
      >.item-theme5{
        >div:first-child{
          background: url('../../../assets/img/brand/brand5.png') no-repeat scroll 7px center;
        }
      }
      >.item-theme6{
        >div:first-child{
          background: url('../../../assets/img/brand/brand6.png') no-repeat scroll 7px center;
        }
      }
      >.item-theme7{
        >div:first-child{
          background: url('../../../assets/img/brand/brand7.png') no-repeat scroll 7px center;
        }
      }
      >.item-theme8{
        >div:first-child{
          background: url('../../../assets/img/brand/brand8.png') no-repeat scroll 7px center;
        }
      }
      >.item-theme9{
        >div:first-child{
          background: url('../../../assets/img/brand/brand9.png') no-repeat scroll 7px center;
        }
      }
      >.item-theme10{
        >div:first-child{
          background: url('../../../assets/img/brand/brand10.png') no-repeat scroll 7px center;
        }
      }
      /* >li:nth-child(4)~li{
        >div:first-child{
          padding-left: 22px;
        }
      } */
    }
  }
}
</style>

